<template>
	<scroll-view class="one-classify bg-white" scroll-x>
		<view class="e-flex">
			<view class="one-classify__item e-flex" :class="{ 'one-classify--active': menuIndex === index }" v-for="(item, index) in list" :key="index" @tap="menuIndex = index">
				<view>
					<view class="e-flex-xy-center e-m-b-10">
						<view class="one-classify__item-img e-flex-xy-center" :style="[menuIndex === index ? {} : borderColor]">
							<view>
								<load-image mode="aspectFill" shape="circle" :size="[menuIndex === index ? '80rpx' : '72rpx']" :src="item.icon" />
							</view>
						</view>
					</view>
					<view class="one-classify__item-name e-font-26 text-center ">
						<text class="white-nowrap">{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script lang="ts" setup>
import {computed } from 'vue';
import type { ClassifyItem } from '@/common/request/api';
import type { Skin } from '@/common/stores';

const props = defineProps<{
	modelValue:Number,
	list: ClassifyItem[];
	skin: Skin;
}>();
const emit = defineEmits(['update:modelValue']);

const menuIndex = computed({
	get () {
		return props.modelValue
	},
	set (v) {
		emit('update:modelValue', v);
	}
});

const borderColor = computed(() => {
	return {
		borderColor: props.skin.primary.replace('1)', '.05)')
	};
});

</script>

<style lang="scss" scoped>
.one-classify {
	height: 184rpx;
	padding: 0 20rpx;
	white-space: nowrap;

	&__item {
		height: 184rpx;
		margin-right: 40rpx;

		&-img {
			width: 92rpx;
			height: 92rpx;
			border-radius: 58rpx;
			border-width: 4rpx;
			border-style: solid;

			// border-color: rgba(244,204,148, 0.05);
			> view {
				width: 72rpx;
				height: 72rpx;
			}
		}

		&-name {
			padding: 0 10rpx;
			border-radius: 20px;
			color: #303133;
		}
	}

	&--active {
		.one-classify__item-img {
			width: 100rpx;
			height: 100rpx;
			border-color: var(--color-primary);

			> view {
				width: 80rpx;
				height: 80rpx;
			}
		}

		&-name {
			background-color: var(--color-primary);
			color: #ffffff;
		}
	}
}
</style>
